<template>
  <label style="width: 50px;display: inline-block;">{{ itemKey }}:</label>
  <el-select v-model="state.type" :placeholder="name" size="large" clearable>
    <el-option
        v-for="item in state.options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
    />
  </el-select>
  <el-input v-model="state.value" style="width: 200px;" :placeholder="name" size="large" v-if="state.type=='0'"/>
  <el-select v-model="state.selectValue" style="width: 200px;" :placeholder="name" size="large" clearable
             v-if="state.type=='1'||state.type=='2'">
    <el-option
        v-for="item in state.ValueOptions"
        :key="item.key"
        :label="item.lable"
        :value="item.key"
    />
  </el-select>
</template>

<script lang="ts">
import {defineComponent, reactive, ref, watch} from 'vue'

export default defineComponent({
  props: {
    itemKey: String,
    name: String,
    type: String,
    value: String,
    selectValue: String,
    colunm: Object
  },
  setup: function (props, context) {
    const state = reactive({
      value: ref(''),
      type: ref(''),
      selectValue: ref([]),
      ValueOptions:[{}],
      options: [
        {
          value: '0',
          label: '固定值',
        },
        {
          value: '1',
          label: '下拉框',
        },
        {
          value: '2',
          label: '自动生成',
        },
      ],
    });
      watch(() => state.type, (newVal) => {
            context.emit('update:type', newVal);
          }
      );
    watch(() => state.value, (newVal) => {
      context.emit('update:value', newVal)
    })
    watch(() => state.selectValue, (newVal) => {
      context.emit('update:selectValue', newVal)
    })
    watch(() => props.colunm, (newVal: any) => {
      state.ValueOptions=newVal;
    })
    return {
      state,
    };
  }
})
</script>